<template>
	<view class="miou-my-game">
		
		<view class="game-top">
			<view class="title">我的活动</view>
			<view class="more" @click="$jumpPages('myactivity', {cur: 1})">更多 <text class="cuIcon-right"></text></view>
		</view>
		<view class="game-bottom">
			<view class="no-game" v-if="!game.length">
				<view class="info margin-bottom-xs">今日您未参加活动</view>
				<button class="cu-btn bg-cyan round" @click="jumpActivity">立即参加</button>
				<image class="no-img" src="/static/img/img_hdweikon.png" mode="scaleToFill"></image>
			</view>
			<view class="game-list" v-else>
				<block v-for="(item, index) of game" :key="index">
					<view class="game">
						<view class="g-img">
							<image class="img" :src="item.gameimg" mode="aspectFill"></image>
						</view>
						<view class="g-info">
							<view class="title text-cut">{{item.gamename}}</view>
							<view class="time">{{gdate.formatTime(item.startdate, item.starttime)}}</view>
							<view class="shopname">{{item.shopname}}</view>
							<button class="cu-btn bg-cyan round xs" @click="jumpGame(item)">查看详情</button>
						</view>
					</view>
				</block>
			</view>
		</view>
	</view>
</template>


<script module="gdate" lang="wxs">
	function formatTime (startdate, starttime) {
		var Yy = startdate.substring(0,4) + '年'
		var Mm = startdate.substring(4,6) + '月'
		var Dd = startdate.substring(6,9) + '日'
		var time = starttime.substring(0,2) + ':' + starttime.substring(2)
		return Yy + Mm + Dd+  " " + time
	}
    module.exports = {
		formatTime: formatTime
    }
</script>


<script>

export default {
	data() {
		return {
			
		};
	},
	props: {
		game: {
			type: Array,
			default: () => {
				return []
			}
		}
	},
	methods: {
		jumpActivity() {
			this.$store.commit('SET_INDEX_PAGE', 'activity')
		},
		jumpGame(activity) {
			this.$jumpPages('activity', {
				gameid:	activity.gameid,
				gametype: activity.gametype,
				gameplanid:	activity.gameplanid,
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.miou-my-game{
	margin: 30rpx;
	border-radius: 20rpx;
	box-shadow:  0px 0px 10px #f5f5f5;
	.game-top{
		display: flex;
		justify-content: space-between;
		height: 90rpx;
		line-height: 90rpx;
		padding: 0 24rpx;
		.title{
			font-size: 28rpx;
			font-weight: 700;
			color: #333333;
			position: relative;
			z-index: 2;
			&::after{
				content: "";
				position: absolute;
				left: 0;
				right: -10rpx;
				bottom: 28rpx;
				height: 12rpx;
				background-color: rgba(46, 185, 195, 0.43);
				border-radius: 12rpx;
				z-index: 1;
			}
		}
		.more{
			font-size: 24rpx;
			color: #999;
		}
	}
	.game-bottom{
		min-height: 188rpx;
	}
	.no-game{
		padding: 28rpx 0 0 56rpx;
		position: relative;
	}
	.no-img{
		width: 296rpx;
		height: 146rpx;
		position: absolute;
		right: 42rpx;
		top: 2rpx;
	}
	.game{
		position: relative;
		margin-left: 24rpx;
		margin-right: 24rpx;
		padding-bottom: 24rpx;
		.g-img{
			width: 156rpx;
			height: 156rpx;
			border-radius: 10rpx;
			overflow: hidden;
			float: left;
			.img{
				width: 156rpx;
				height: 156rpx;
			}
		}
		.g-info{
			margin-left: 172rpx;
			min-height: 156rpx;
		}
		.title{
			color: #333333;
			font-size: 28rpx;
			font-weight: 700;
			margin-bottom: 8rpx;
		}
		.time{
			color: #666666;
			font-size: 28rpx;
			margin-bottom: 18rpx;
		}
		.cu-btn{
			position: absolute;
			right: 0;
			bottom: 28rpx;
			font-size: 22rpx;
			height: 48rpx;
			padding: 0 16rpx;
		}
	}
	
}
</style>